<template>
  <div class="dashboard-wrapper">
      <div id="chart"></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            listData: []
        }
    },
    mounted() {
        if (localStorage.getItem('bloodlog')) {
            let listData = localStorage.getItem('bloodlog')
            this.listData = JSON.parse(listData)
        }
        // var xData = () => {
            
        //     var data = [];
        //     for (var i = 1; i < this.listData.length; i++) {
        //         data.push(this.listData[i].date + this.listData[i].time);
        //     }
        //     return data;
        // }
        var xData = [];
        var logData = []
        this.listData.map(item => {
            xData.unshift(item.date + ' ' + item.time)
            logData.unshift(item.sugar)
        })
        let chart = this.$echarts.init(document.getElementById('chart'))
        chart.setOption({
            // backgroundColor: "#1A1835",
            title: {
                text: '血糖曲线图',
                textStyle: {
                    align: 'center',
                    color: '#333',
                    fontSize: 18,
                },
                top: '5%',
                left: 'center',
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                    textStyle: {
                        color: "#fff"
                    }

                },
            },
            grid: {
                borderWidth: 0,
                top: 110,
                bottom: 115,
                textStyle: {
                    color: "#fff"
                }
            },
            


            calculable: true,
            xAxis: [{
                type: "category",
                axisLine: {
                    lineStyle: {
                        color: "#1A1835",
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    rotate: -45
                },
                data: xData,
            }],

            yAxis: [{
                type: "value",
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: "#1A1835",
                    }
                },

            }],
            // dataZoom: [{
            //     show: true,
            //     height: 30,
            //     xAxisIndex: [0],
            //     bottom: 30,
                
            //     "start": 10,
            //     "end": 80,
            //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            //     handleSize: '110%',
            //     handleStyle: {
            //         color: "#5B3AAE",
            //     },
            //     textStyle:{
            //         color:"rgba(204,187,225,0.5)",
            //     },
            //     fillerColor:"rgba(67,55,160,0.4)",
            //     borderColor: "rgba(204,187,225,0.5)",

            // }, {
            //     type: "inside",
            //     show: true,
            //     height: 15,
            //     start: 1,
            //     end: 35
            // }],
            series: [{
                name: "血糖",
                type: "line",
                symbolSize: 10,
                symbol: 'circle',
                itemStyle: {
                    color: "#07c160",
                },
                markPoint: {
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    data: [{
                        type: 'max',
                        name: '最大值',

                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                data: logData
            }, ]
        })
    }
}
</script>

<style lang="less">
    .dashboard-wrapper {
        width: 100vw;
        height: 100vh;
        // background-color: #1F1F2B !important;
        display: flex;
        align-items: center;
        #chart {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            height: 460px;
            color: #fff;
            canvas {
                width: 100vw;
                padding: 10px;
                box-sizing: border-box;
            }
        }
    }
</style>